<template>
	<view class="count">
		<view class="botImgUpload">
			<textarea v-model="textarea" name="" @input="input" placeholder="快来记录一下你的宝贝吧" class="text" id="" cols="30"
				rows="10"></textarea>
			<!-- 下面的上传图片 -->
			<view class="pingText">
				<u-upload ref="uUpload" :show-progress="false" @on-remove="onRemove" upload-text="点击上传" max-count="9"
					:form-data="fromData" width="190" @on-success="succress" :before-upload="beforeUpload" height="190"
					:action="url"></u-upload>
			</view>
		</view>
		<view @click="fabu" class="Publish">
			发布
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				textarea: '',
				url: uni.getStorageSync('upload_domain'),
				token: uni.getStorageSync('upload_token'),
				fromData: {
					token: uni.getStorageSync('upload_token'),
					key: ''
				},
				domain: uni.getStorageSync('domain'),
				imgList: [],
				status: true,
				flag: true
			}
		},
		onBackPress() {
			return false
		},
		onShow() {

		},
		onLoad() {
			// console.log(this.textarea, '1111');
			// if (this.textarea.length > 0) {
			// 	wx.enableAlertBeforeUnload({
			// 		message: "当前内容还未发布，退出后无法保存",
			// 		success: function(res) {
			// 			console.log("成功：", res);
			// 		},
			// 		fail: function(err) {
			// 			console.log("失败：", err);
			// 		},
			// 	});
			// }
			this.fromData.key = this.genKey()
			uni.hideLoading()
		},
		methods: {
			// 这个是监听input
			input(e) {
				if (this.textarea.length > 0) {
					wx.enableAlertBeforeUnload({
						message: "当前内容还未发布，退出后无法保存",
						success: function(res) {
							console.log("成功：", res);
						},
						fail: function(err) {
							console.log("失败：", err);
						},
					});
				} else {
					wx.disableAlertBeforeUnload();
				}
				if (e.detail.value.length != 0) {
					this.flag = true
				} else {
					this.flag = false
				}
			},
			async fabu() {
				let n = await this.$api.momentsFa({
					content: this.textarea,
					images: this.imgList.map(item => item).join(','),
				})
				this.textarea = ''
				wx.disableAlertBeforeUnload();
				this.$msg(n.msg)
				if (n.code == 200) {
					this.status = false
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}
			},
			onRemove(index, lists) {
				this.imgList = []
				lists.forEach(item => {
					this.imgList.push(item.url)
				})
			},
			succress(data, index, lists, name) {
				uni.hideLoading()
				this.imgList.push(this.domain + '/' + data.key)
			},
			genKey() {
				uni.showLoading({
					title: "加载中"
				})
				let n = `img/${+new Date()+'/'+this.randomString()}.png`
				console.log(n);
				return n
			},
			beforeUpload(index, list) {
				console.log(index, list, '000');
				this.fromData.key = this.genKey()
				console.log(this.fromData, '8888888');
				return true
			},
			randomString() {
				let str = 'ABCDEFGHIJKIMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
				let num = '';
				for (let i = 0; i < 16; i++) {
					num += str.charAt(Math.floor(Math.random() * str.length));
				}
				console.log(num, '000000000000');
				return num;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Publish {
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 90%;
		height: 96rpx;
		line-height: 95rpx;
		background: $brown;
		border-radius: 48rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-500;
		font-weight: 600;
		text-align: center;
		color: #ffffff;
	}

	/deep/ .u-list-item {
		border-radius: 20rpx !important;
		width: 165rpx !important;
		height: 165rpx !important;
	}

	.count {
		height: 100vh;
		width: 100%;
		background: #fffefc;
	}

	.botImgUpload {
		width: 90%;
		margin: 0 auto;
		background: #fffefc;
		padding: 30rpx 0;
		border-radius: 24rpx;
		color: #cbc2bb;

		.text {
			width: 100%;
			height: 400rpx;
			color: #2f2319;
		}
	}

	.pingText {
		width: 90%;
		// padding: 30rpx 20rpx;
		border-radius: 30rpx;
		background: #fffefc;
		// margin: 20rpx auto;

		.tu {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: LEFT;
			color: #666666;
			margin-bottom: 20rpx;
		}
	}
</style>